@charset "UTF-8";
h1 {
  color: red;
}

.d1 {
  color: rgb(38, 0, 255);
  font-size: 20px;
  margin-left: 10px;
}

.d2 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-left: 20px;
  margin-top: 10px;
  margin-right: 18px;
  margin-bottom: 5px;
  padding-left: 3px;
  padding-left: 1px;
  padding-top: 2px;
  font-size: 12px;
}

.main {
  color: aqua;
}
.main .left .center p {
  color: blue;
}

.search {
  width: 490px;
  height: 36px;
  border: 2px solid #e2231a;
  display: flex;
}
.search .left {
  flex: 1;
  display: flex;
}
.search .left .left-input {
  flex: 1;
  padding: 6px 10px;
  display: flex;
}
.search .left .left-input input {
  flex: 1;
  border: none;
  outline: none;
}
.search .left .left-camera {
  flex-basis: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.search .left .iconfont:hover {
  color: red;
}
.search .right {
  flex-basis: 58px;
  background-color: #e1251b;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.search .right:hover {
  background-color: #a73b35;
  transition-delay: 0.5s;
}
.search .right .iconfont {
  color: white;
  font-weight: bold;
  font-size: 20px;
}

.d3 {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-color: red;
  border-top-left-radius: 10px;
  font-size: 20px;
}

.d4 {
  width: 100px;
  height: 100px;
  border: solid;
}
.d4:hover {
  background-color: red;
}

/* 
    标准（多行）注释
    会显示在css文件中
*/
/*!
    重要注释
*/
/* 
    一个选择器可以让多个选择器继承
    继承的关键字 @extend
*/
.d5, .d6, .d7 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.d6, .d7 {
  font-size: 20px;
}

/* 
    先使用@mixin定义一个混合
    在使用@include使用这个混合
*/
.d8 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.d9 {
  width: 200px;
  height: 100px;
  border: 1px solid red;
}

h2 {
  color: red;
}

.d10 {
  width: 100px;
  height: 100px;
  border: solid;
  /* 
      @if 条件为true，css代码生效
          条件为false，css代码不生效
      如果设置了@else的话
          条件为true，if里面的css代码生效
          条件为false，else里面的css代码生效
  */
  background-color: red;
}

/* 
    for循环
    $i的值从from后面的值开始到to后面的值结束（不包括to的值）
    从小到大就是每次+1，从大到小就是每次-1
*/
.a1 {
  border: 1 px solid red;
}

.a2 {
  border: 2 px solid red;
}

.a3 {
  border: 3 px solid red;
}

.a4 {
  border: 4 px solid red;
}

.a5 {
  border: 5 px solid red;
}

.a6 {
  border: 6 px solid red;
}

.a7 {
  border: 7 px solid red;
}

.a8 {
  border: 8 px solid red;
}

.a9 {
  border: 9 px solid red;
}

.b10 {
  border: 10 px solid red;
}

.b9 {
  border: 9 px solid red;
}

.b8 {
  border: 8 px solid red;
}

.b7 {
  border: 7 px solid red;
}

.b6 {
  border: 6 px solid red;
}

.b5 {
  border: 5 px solid red;
}

.b4 {
  border: 4 px solid red;
}

.b3 {
  border: 3 px solid red;
}

.b2 {
  border: 2 px solid red;
}

col-1 {
  flex: 0 0 8.3333333333%;
}

col-2 {
  flex: 0 0 16.6666666667%;
}

col-3 {
  flex: 0 0 25%;
}

col-4 {
  flex: 0 0 33.3333333333%;
}

col-5 {
  flex: 0 0 41.6666666667%;
}

col-6 {
  flex: 0 0 50%;
}

col-7 {
  flex: 0 0 58.3333333333%;
}

col-8 {
  flex: 0 0 66.6666666667%;
}

col-9 {
  flex: 0 0 75%;
}

col-10 {
  flex: 0 0 83.3333333333%;
}

col-11 {
  flex: 0 0 91.6666666667%;
}

col-12 {
  flex: 0 0 100%;
}

.b1 {
  border: 1px solid red;
}

.b2 {
  border: 2px solid red;
}

.b3 {
  border: 3px solid red;
}

.b4 {
  border: 4px solid red;
}

.b5 {
  border: 5px solid red;
}

.b6 {
  border: 6px solid red;
}

.b7 {
  border: 7px solid red;
}

.b8 {
  border: 8px solid red;
}

.b9 {
  border: 9px solid red;
}

.b10 {
  border: 10px solid red;
}

.e10 {
  border: 10px solid red;
}

.e9 {
  border: 9px solid red;
}

.e8 {
  border: 8px solid red;
}

.e7 {
  border: 7px solid red;
}

.e6 {
  border: 6px solid red;
}

.e5 {
  border: 5px solid red;
}

.e4 {
  border: 4px solid red;
}

.e3 {
  border: 3px solid red;
}

.e2 {
  border: 2px solid red;
}

.e1 {
  border: 1px solid red;
}

.f1 {
  background-image: url(1.pgn);
}

.f2 {
  background-image: url(2.pgn);
}

.fa {
  background-image: url(a.pgn);
}

.fb {
  background-image: url(b.pgn);
}

.fc {
  background-image: url(c.pgn);
}

.fd {
  background-image: url(d.pgn);
}

.d10 {
  width: 20px;
  height: 40px;
}/*# sourceMappingURL=index.css.map */